import {Button, Card, message, Modal, Table} from "antd";
import React, {useEffect, useState} from "react";
import {formateDate} from "../../utils/dateUtils";
import LinkButton from "../../components/link-button";
import {PAGE_SIZE} from "../../utils/constants";
import {reqAddOrUpdateUser, reqDeleteUser, reqUserList} from "../../apis";
import UserForm from "./user-form";

function User() {
    const [loading, setLoading] = useState(false)
    // 用户列表初始值
    const [users, setUsers] = useState([])
    // 角色列表初始值
    const [roles, setRoles] = useState([])
    // 当前选择用户
    const [user, setUser] = useState(null)
    // 控制模态框是否显隐
    const [isShow, setIsShow] = useState(false)
    // 角色名集合
    const [roleNames, setRoleNames] = useState([])

    const title = (
        <Button type={"primary"}
                onClick={showAdd}
        >创建用户</Button>
    )
    // 打开新增用户弹窗
    function showAdd (){
        setUser(null)
        setIsShow(true)
    }
    // 删除用户 唤起确认框 发请求 重新请求列表
    function deleteUser(user) {
        Modal.confirm({
            title: `确认删除${user.username}吗?`,
            async onOk(){
                const res = await reqDeleteUser(user._id)
                console.log('删除',res, typeof res.status)
                if(res.status === 0){
                    message.success('删除用户成功')
                    getUserList()
                }else{
                    message.error('删除用户失败')
                }
            }
        })
    }

    // 修改用户回调
    function showUpdateUser(user) {
        console.log('传入的user', user)
        // 设置传入user为当前user
        setUser(user)
        setIsShow(true)
    }

    const initColumns = () => {
        const columns = [{
            title:'用户名',
            dataIndex:'username',
        },{
            title: '邮箱',
            dataIndex: 'email'
        },{
            title: '电话',
            dataIndex: 'phone'
        },{
            title: '注册时间',
            dataIndex: 'create_time',
            render: formateDate
        },{
            title: '所属角色',
            dataIndex: '_id',
            render: (_id) => {
                return roleNames[parseInt(_id)];
            }
        },{
            title: '操作',
            render: (user) => (
                <span>
                    <LinkButton onClick={() => showUpdateUser(user)}>修改</LinkButton>
                     <LinkButton onClick={() => deleteUser(user)}>删除</LinkButton>
                </span>
            )
        }]

        return columns
    }
    const childFormRef = React.createRef();
    // 添加用户回调
   const addOrUpdateUser = async (values) => {
        // 设置
        // 在这里使用收集到的子组件数据
        const childFormData = childFormRef.current.getFormData();

        if(user){
            childFormData._id = user._id
        }
       console.log('Child form data:', childFormData);
        // setIsShow(false);
        // 收集输入数据
        const res = await reqAddOrUpdateUser(childFormData)
        // 提交添加请求
        if(res.status === 0){
            message.success(`${user ? '修改' : '添加'}用户成功`)
            await getUserList()
            setIsShow(false)
        }else{
            message.error(
                res.msg
            )
        }
    }
    // 根据role的数组, 生成包含所有角色名的对象(属性名用角色id值)
    function initRoleNames(roles) {
        const roleNames = roles.reduce((pre, role) => {
            // 左赋值
            pre[role._id] = role.name
            return pre
        }, {})
        // 保存
        console.log('整理好的roleNames:', roleNames)
        setRoleNames(roleNames)
    }

    async function  getUserList() {
        const res = await reqUserList()
        if(res.status === 0){
            setUsers(res.data.users)
            setRoles(res.data.roles)
            initRoleNames(res.data.roles)
        }
    }

    useEffect(() => {
        getUserList()
    }, []);

   function hideModal(){
       setIsShow(false)
   }
    // 在父组件中

    return(
        <Card title={title}>
            <Table
                bordered
                rowKey='_id'
                loading={loading}
                dataSource={users}
                pagination={{ defaultPageSize: PAGE_SIZE, showQuickJumper: true }}
                columns={initColumns()}
            ></Table>

            <Modal
                title={ user?._id ? '修改用户' : '创建用户' }
                open={isShow}
                onOk={addOrUpdateUser}
                onCancel={hideModal}
                style={{paddingTop: '20'}}
            >
                <UserForm user={user}
                          roles={roles} // 传递角色列表 给子组件渲染
                          ref={childFormRef}
                ></UserForm>
            </Modal>
        </Card>
    )
}
export default User;